<script setup>
	import {
		computed,
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import SinglePv2 from "@/pages_nbst/components/question/SinglePv2.vue"
	import MultPv2 from "@/pages_nbst/components/question/MultPv2.vue"
	import {
		getWrongQuestionStat1Req
	} from "@/pages_nbst/api/my.js"

	onLoad(q => {
		getWrongQuestionStat1Req().then(res => {
			dataList = res.map(v => {
				v.question_detail.options.forEach(vv => {
					vv.answer = vv.checked
				})
				return {
					type: v.question_detail.type,
					content: v.question_detail.content,
					options: v.question_detail.options,
					questionId: v.question_id,
					count: v.count,
					showUserAnswer: false
				}
			})
			initSwiper()
		})
	})
	
	// swiper --------------
	const initSwiper = () => {
		swiperList.value = []
		swiperIndex.value = 0
		total.value = dataList.length
	
		dataList.forEach((v, i) => {
			if (i < 3) {
				swiperList.value.push(v)
			} else {
				swiperList.value.push({
					correct: v.correct,
				})
			}
		})
	}
	
	const swiperIndex = ref(0)
	const total = ref(0)
	let dataList = []
	const favList = ref([])
	const swiperList = ref([])
	const progress = computed(() => {
		return total.value === 0 ? 0 : (swiperIndex.value + 1) * 100 / total.value
	})
	const onHandlerSwiperChange = (e) => {
		swiperIndex.value = e.detail.current
		handleSwiperItem()
	}
	const handleSwiperItem = () => {
		[-2, -1, 0, 1, 2].forEach(v => {
			const ii = swiperIndex.value + v
			if (ii + 1 <= dataList.length && ii >= 0) {
				if (swiperList.value[ii]?.id === undefined) {
					swiperList.value[ii] = dataList[ii]
				}
			}
		});
	}
	const bodyHeight = computed(() => {
		return `calc(100% - 2px)`
	})
	// swiper -------------- end
</script>

<template>
	<uv-line-progress :percentage="progress" activeColor="#aaaaff" :showText="false" height="2" />
	<view v-if="total" style="position: absolute;top: 60rpx;right: 40rpx;">
		<span style="font-size: 50rpx;">{{swiperIndex+1}}</span> <span style="color: #a8a8a8;">/{{total}}</span>
	</view>
	<view v-if="total" style="position: absolute;top: 60rpx;right: 50%;">
		<span style="color: #a8a8a8;">错误次数：{{dataList[swiperIndex].count}}</span>
	</view>
	<swiper :style="{height: bodyHeight}" @change="onHandlerSwiperChange" :current="swiperIndex">
		<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
			<view style="height: 20rpx;"></view>
			<view style="padding: 20rpx;">
				<SinglePv2 v-if="item.type === 1" :data="item" />
				<MultPv2 v-else-if="item.type === 2" :data="item" />
				<view v-else />
				<view style="height: 10rpx;"></view>
			</view>
		</swiper-item>
	</swiper>
</template>

<style scoped lang="scss">

</style>
<style>
	page {
		height: 100%;
	}
</style>